<template>
  <div class="footer">
    <ul>
      <li @click="btnClick('/')">
        <div class="nav homeimg" v-if="hash == '/'">
          <img class="nav-img" src="../images/home1.png" alt="" />
          <p class="nav-p1">首页</p>
        </div>

        <div class="nav homeimg" v-else>
          <img class="nav-img" src="../images/home2.png" alt="" />
          <p class="nav-p2">首页</p>
        </div>
      </li>
      <li @click="btnClick('/classify')">
        <div class="nav homeimg" v-if="hash == '/classify'">
          <img class="nav-img" src="../images/classify1.png" alt="" />
          <p class="nav-p1">分类</p>
        </div>

        <div class="nav homeimg" v-else>
          <img class="nav-img" src="../images/classify2.png" alt="" />
          <p class="nav-p2">分类</p>
        </div>
      </li>
      <li
        @click="
          btnClickA(
            'https://m.jingxi.com/mcoss/wxmall/home?_fd=jx&ptag=17008.1.14&vk=40532333845718224&ptype=2'
          )
        "
      >
        <div class="nav homeimg">
          <img class="nav-img" src="../images/surprise2.png" alt="" />
          <p class="nav-p2">惊喜</p>
        </div>
      </li>
      <li @click="btnClick('/shopcart')">
        <div class="nav homeimg" v-if="hash == '/shopcart'">
          <img class="nav-img" src="../images/shopcart1.png" alt="" />
          <p class="nav-p1">购物车</p>
        </div>
        <div class="nav homeimg" v-else>
          <img class="nav-img" src="../images/shopcart2.png" alt="" />
          <p class="nav-p2">购物车</p>
        </div>
      </li>
      <li @click="btnClick1()">
        <div class="nav homeimg" v-if="hash == '/mepage'">
          <img class="nav-img" src="../images/register1.png" alt="" />
          <p class="nav-p1">我的</p>
        </div>
        <div class="nav homeimg" v-else>
          <img class="nav-img" src="../images/register3.png" alt="" />
          <p class="nav-p2">我的</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Footer",
  data() {
    return {
      hash: "/",
    };
  },
  methods: {
    btnClick(hash) {
      this.$router.push({
        path: hash,
      });
    },
    btnClickA(url) {
      window.location.href = url;
    },
    btnClick1() {
      if (this.denglu == true) {
        this.$router.push({
          path: "/mepage",
        });
      } else {
        this.$router.push({
          path: "/register",
        });
      }
    },
  },
  watch: {
    $route(newVal) {
      this.hash = newVal.path;
    },
  },
  created() {
    this.hash = this.$route.path;
  },

  computed: {
    denglu() {
      return this.$store.state.denglu;
    },
  },
};
</script>

<style>
.footer {
  width: 100%;
  height: 2.8125rem;
  background: #fff;
  height: 2.8125rem;
  position: fixed;
  bottom: 0;
  z-index: 999;
  box-shadow: 0 0 3px #999;
  background: white;
}
.footer ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  list-style: none;
  align-items: center;
}
.footer ul li {
  width: 3.125rem;
  height: 2.5rem;
}
.nav {
  width: 100%;
  height: 100%;
}
.homeimg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.5rem;
}
.nav-img {
  width: 1.25rem;
  height: 1.25rem;
}
.nav-p1 {
  color: #e93b3d;
}
.nav-p2 {
  color: #8b8b8b;
}
</style>
